<template>
  <div class="appointment-view">
    <el-table :data="appointmentList" stripe>
      <el-table-column prop="appointmentId" label="预约编号" width="120"/>
      <el-table-column prop="packageId" label="套餐编号" width="120"/>
      <el-table-column prop="appointmentTime" label="预约时间">
        <template #default="{row}">
          {{ new Date(row.appointmentTime).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{row}">
          <el-tag :type="row.status === '2' ? 'success' : 'info'">
            {{ row.status === '1' ? '未体检' : '已完成' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button
            v-if="row.status === '2'"
            size="small"
            @click="openEvaluationDialog(row)">
            评价
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="评价" width="400px">
      <el-rate v-model="form.score" :max="5"/>
      <el-input v-model="form.comment" type="textarea" placeholder="评价内容"/>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEvaluation">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { myAppointments } from '@/api/appointments'
import {  appraise } from '@/api/evaluations'
import{ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const appointmentList = ref([])
const dialogVisible = ref(false)
const form = ref({
  userId: 0,
  appointmentId: 0,
  score: 5,
  comment: ''
})
  console.log(userStore.hasRole('admin'))
const openEvaluationDialog = (row:any) => {
  form.value = {
    userId: row.userId,
    appointmentId: row.appointmentId,
    score: 5,
    comment: ''
  }
  dialogVisible.value = true
}

const submitEvaluation = async () => {
  try {
    await appraise(form.value)
    dialogVisible.value = false
  } catch (error) {
    console.error('评价失败', error)
  }
}

onMounted(async () => {
  try {
    const data = await myAppointments()
console.log(data)
if(data.data===null){
  ElMessage('没有预约记录')
}
    appointmentList.value = data.appointmentsNewDTOList
  } catch (error) {
    console.error('获取预约失败', error)
  }
})
</script>

<style scoped>
.appointment-view {
  padding: 20px;
}
</style>
